<template>
  <!-- <el-card v-if="seriesinfo.seriesid" class="mt10" shadow="never">
    <template #header>
      <span  class="card-header">分集信息</span>
      <a href="javascript:;" @click="handleCreateSeries" style="display:inline-block" v-if="currentCorpid === seriesinfo.corpid">
        <el-tag size="mini">
          <el-icon>
            <plus/>
          </el-icon>
          增加
        </el-tag>
      </a>
    </template> -->
    <el-row class="mt10 series" v-if="seriesinfo.seriesid">
      <el-col :span="24">
        <div class="media-header">
          <div>
            <span  class="card-header" style="display:inline-block;">分集信息</span>
            <a href="javascript:;" @click="handleCreateSeries" style="display:inline-block" v-if="currentCorpid === seriesinfo.corpid">
              <el-tag size="mini">
                <el-icon>
                  <plus/>
                </el-icon>
                增加
              </el-tag>
            </a>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <div>
        </div>
      </el-col>
      <el-col :span="24" class="seriesbox" style="flex-wrap:inherit;">
        <span v-for="series in seriesList" :key="series.seriesid">
          <el-button
                  :type="buttonType(series.seriesid)"
                  @click="series.seriesid != seriesinfo.seriesid ? getSeriesInfoData(series.seriesid) : ''"
          >
            {{series.episodenum}}
          </el-button>
        </span>
      </el-col>
      <el-col :span="24" class="mediachild">
        <el-row>
          <el-col :span="24" class="right">
            <el-button type="text" :disabled="seriesinfo.state == 1" @click="handleUpdateSeriesInfo">编辑</el-button>
          </el-col>
        </el-row>
        <ul class="mediainfo">
          <li>
            <span>子集名称：</span>
            <span>{{seriesinfo.name}}</span>
          </li>
          <li>
            <span>子集ID：</span>
            <span>{{seriesinfo.seriesid}}</span>
          </li>
          <li>
            <span>集号：</span>
            <span>{{seriesinfo.episodenum}}</span>
          </li>
          <li v-if="seriesinfo.extends">
            <span>节目类型：</span>
            <span>{{programTypeList[seriesinfo['extends']['programtype']]}}</span>
          </li>
          <li>
            <span>别名：</span>
            <span>{{seriesinfo['alias']}}</span>
          </li>
          <li>
            <span>摘要：</span>
            <span>{{seriesinfo['abstract']}}</span>
          </li>
          <li>
            <span>详细说明：</span>
            <span>{{seriesinfo['content']}}</span>
          </li>
          <li>
            <span>时长：</span>
            <span>{{seriesinfo['duration']}}</span>
          </li>
          <li>
            <span>审核状态：</span>
            <span>
              <span v-if="seriesinfo.state == 0">未提交审核</span>
              <span v-else-if="seriesinfo.state == 1">提交审核</span>
              <span v-else-if="seriesinfo.state == 2">审核通过</span>
              <span v-else-if="seriesinfo.state == 3">审核不通过</span>
              <span v-else-if="seriesinfo.state == 4">免审</span>
            </span>
          </li>
        </ul>
      </el-col>
      <el-col :span="24">
      <image-medium
              v-if="seriesinfo"
              :current-corpid="currentCorpid"
              :data-info="seriesinfo"
              rel-type="series"
              @handleVideoPlay="handleVideoPlay"
              @reloadMediaData="reloadMediaData"
      />
      </el-col>
      <el-col :span="24">
        <video-medium
            ref="videoMediumRef"
            v-if="seriesinfo"
            rel-type="series"
            :data-info="seriesinfo"
            :current-corpid="currentCorpid"
            @handleVideoPlay="handleVideoPlay"
            @reloadImageList="reloadMediaData"
        />
      </el-col>
    </el-row>

    <!-- 新建子集开始 -->
    <create-dialog
            ref="createSeriesRef"
            :visible="dialogSeriesVisible"
            :to-dialog-data="dialogSeriesFormData"
            :key="dialogSeriesKey"
            @getData="reloadSeriesData"
            @cancelDialog="cancelSeriesDialog"
    />
    <!-- 新建子集结束 -->
  <!-- </el-card> -->

</template>

<script>
  import {reactive, ref, computed, nextTick} from 'vue'
  import {useStore} from 'vuex'
  import {getSeries, getSeriesInfo} from "@/api/series/series";
  import {Plus} from "@element-plus/icons"
  import ImageMedium from "./ImageMedium";
  import VideoMedium from "./VideoMedium";
  import CreateDialog from "../../../series/CreateDialog";

  export default {
    name: "SeriesInfo",
    props: {
      query: {
        type: Object,
        required: true
      }
    },
    components: {Plus, ImageMedium, VideoMedium, CreateDialog},
    emits: ['handleVideoPlay'],
    setup(props, context) {
      const store = useStore()
      const currentCorpid = store.getters.corpinfo.corpid
      const seriesinfo = reactive({})
      const seriesList = ref([])
      const currentSeriesId = ref(undefined)
      const programTypeList = reactive({
        feature: '正片',
        trailer: '预告片',
        titbits: '花絮'
      })
      const videoMediumRef = ref(null)
      /** 创建编辑子集变量开始 **/
      const dialogSeriesVisible = ref(false)
      const dialogSeriesFormData = reactive({
        mediaid: undefined,
        groupid: undefined,
        seriesid: undefined,
        mediatype: undefined
      })
      const dialogSeriesKey = ref('')
      const dialogSeriesStatus = ref('create')
      const createSeriesRef = ref(null)
      /** 创建编辑子集变量结束 **/

      const buttonType = computed(() => {
        return (seriesid) => {
          if (seriesinfo.seriesid == seriesid) {
            return 'primary'
          } else {
            return 'default'
          }
        }
      })

      const getSeriesDataList = () => {
        getSeries({mediaid: props.query.mediaid, pagesize: 10000}).then(response => {
          seriesList.value = response.data.list
          if (currentSeriesId.value === undefined) {
            if (seriesList.value.length > 0) {
              currentSeriesId.value = seriesList.value[0].seriesid
            }
          }
          if (currentSeriesId.value) {
            getSeriesInfoData(currentSeriesId.value)
          }
        })
      }
      const getSeriesInfoData = (seriesid) => {
        currentSeriesId.value = seriesid
        getSeriesInfo({seriesid: seriesid}).then(response => {
          Object.assign(seriesinfo, response.data)
          getSeriesVideoDataList()
        })
      }

      const handleCreateSeries = () => {
        dialogSeriesKey.value = new Date().getTime()
        dialogSeriesFormData.mediaid = props.query.mediaid
        dialogSeriesFormData.groupid = props.query.groupid
        dialogSeriesFormData.seriesid = undefined
        dialogSeriesFormData.mediatype = props.query.mediatype
        dialogSeriesStatus.value = 'create'
        dialogSeriesVisible.value = true
        nextTick(() => {
          createSeriesRef.value.init()
        })
      }
      const handleUpdateSeriesInfo = () => {
        dialogSeriesKey.value = new Date().getTime()
        dialogSeriesFormData.seriesid = seriesinfo.seriesid
        dialogSeriesFormData.mediatype = props.query.mediatype
        dialogSeriesFormData.mediaid = props.query.mediaid
        dialogSeriesFormData.groupid = props.query.groupid
        dialogSeriesStatus.value = 'update'
        dialogSeriesVisible.value = true
        nextTick(() => {
          createSeriesRef.value.init()
        })
      }
      const handleVideoPlay = (row) => {
        context.emit('handleVideoPlay', row)
      }
      const reloadMediaData = () => {
        getSeriesInfoData(currentSeriesId.value)
      }
      const getSeriesVideoDataList = () => {
        nextTick(() => {
          videoMediumRef.value.getVideoDataList()
        })
      }
      const reloadSeriesData = () => {
        getSeriesDataList()
      }
      const cancelSeriesDialog = () => {
        dialogSeriesVisible.value = false
      }
      const init = () => {
        getSeriesDataList()
      }
      init()
      return {
        handleCreateSeries,
        seriesinfo,
        currentCorpid,
        seriesList,
        buttonType,
        programTypeList,
        handleUpdateSeriesInfo,
        handleVideoPlay,
        reloadMediaData,
        getSeriesInfoData,
        videoMediumRef,
        createSeriesRef,
        dialogSeriesFormData,
        dialogSeriesStatus,
        dialogSeriesVisible,
        dialogSeriesKey,
        reloadSeriesData,
        cancelSeriesDialog
      }
    }
  }
</script>
<style lang="scss">
  // .series{
  //   .mediatitle{
  //     font-size: 15px;
  //   }
  // }
  .mediachild{
      padding: 5px 25px 25px;
      background: rgba(216,216,216,0.18);
    }
  .seriesbox{
    >span{
      .el-button{
        width: 45px;
        height: 36px;
        border-radius: unset;
        margin-bottom: 10px;
        margin-right: 7px;
        padding:0;
        min-height: auto;
      }
      .el-button--primary{
        background-color:  #3D73F2;
        border:0;
      }
    }

  }
</style>
